/*
 * CONVERT DIALOG TITLE TO HTML
 * REF: http://stackoverflow.com/questions/14488774/using-html-in-a-dialogs-title-in-jquery-ui-1-10
 */
$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
	_title: function(title) {
		if (!this.options.title) {
			title.html("&#160;");
		} else {
			title.html(this.options.title);
		}
	}
}));
var TEMPQUESTION;
var CQuestion = Backbone.Collection.extend({
	data: [],
	add: function() {

	}
});

var VQuestionEdit = Backbone.View.extend({
	initialize: function() {
		this.setElement("body");
	},

	events: {
		"click .btn-question-add": "addQuestion",
		"click .btn-question-del": "delQuestion",
		"click .btn-question-cls": "clsQuestion",
		"click .btn-question-edit": "editQuestion",
		"click .btn-question-save": "saveQuestion",

	},

	render: function(data) {
		console.log(data);
		html = ""
		questions = SURVEY_DATA.questions
		console.log(questions)
		console.log(questions.length)
		for (var i = questions.length - 1; i >= 0; i--) {
			html = template("survey_question_view", questions[i]) + html;
		};
		$("#survey_questions").html(html)
	},
});

var VSurveyForm = Backbone.View.extend({
	initialize: function() {
		this.setElement("body");
	},

	events: {
		"click .btn-survey-info": "sinfo",
		"click .btn-survey-view": "sview",
		"click .btn-survey-logic": "slogic",

		"click .btn-question-add": "addQuestion",
		"click .btn-question-del": "delQuestion",
		"click .btn-question-cls": "clsQuestion",
		"click .btn-question-edit": "editQuestion",
		"click .btn-question-save": "saveQuestion",

		"click .btn-qpic": "qpic",
		"click .btn-qdesc": "qdesc",
		"click .btn-qview": "qview",
		"blur .qname": "qname",
		"keyup .bootstrap-tagsinput input": "qtag",
		"keydown .bootstrap-tagsinput input": "qtag",

		"click .btn-oadd": "oadd",
		"click .btn-odel": "odel",
		"click .btn-opic": "opic",
		"click .btn-odesc": "odesc",
	},

	sinfo: function() {
		$("#dialog-survey-info").dialog("open");
	},

	sview: function() {
		//$("#dialog-survey-info").dialog("open");
	},
	slogic: function() {
		console.log("slogic")
		$("#dialog-survey-logic").dialog("open");
	},

	oadd: function(e) {
		data = {}
		data.sid = SURVEY_ID;
		data.qid = TEMPQUESTION.id;
		data.name = "选项名称";
		$.post("/api/survey/option/create", data, function(res) {
			if (res.response.code == 0) {
				TEMPQUESTION.options.push(res.data);
				html = template("survey_option_edit", res.data);
				$("#question-option-list").append(html);
				console.log("oadd")
			}
		});

	},

	odel: function(e) {
		data = {}
		data.sid = SURVEY_ID;
		data.qid = TEMPQUESTION.id;
		data.oid = $(e.target).parents("tr").attr("data-id");
		$.post("/api/survey/option/delete", data, function(res) {
			if (res.response.code == 0) {
				$(e.target).parents("tr").remove();
			}
		});
	},

	opic: function(e) {
		oid = $(e.target).parents("tr").attr("data-id");
		TEMPOPTION = _.find(TEMPQUESTION.options, function(option) {
			return option.id == oid;
		});
		if (TEMPOPTION.pic) {
			url = TEMPOPTION.pic
		} else {
			url = ""
		}

		$("#form-pic-url").val(url);
		$("#form-pic-view").attr("src", url);
		$("#form-pic-type").val("option");
		$("#dialog-picture-upload").dialog("open");
	},

	odesc: function(e) {
		oid = $(e.target).parents("tr").attr("data-id");
		TEMPOPTION = _.find(TEMPQUESTION.options, function(option) {
			return option.id == oid;
		});
		$("#form-description-type").val("option");
		$("#form-description-content").val(TEMPOPTION.description);
		$("#dialog-survey-description").dialog("open");
	},

	qpic: function() {

		if (TEMPQUESTION.pic) {
			url = TEMPQUESTION.pic
		} else {
			url = ""
		}
		$("#form-pic-url").val(url);
		$("#form-pic-view").attr("src", url);
		$("#form-pic-type").val("question");
		$("#dialog-picture-upload").dialog("open");
	},

	qdesc: function() {
		$("#form-description-type").val("question");
		$("#form-description-content").val(TEMPQUESTION.description);
		$("#dialog-survey-description").dialog("open");
	},

	qview: function() {
		$("#question-view-" + TEMPQUESTION.id).show().removeClass("editing");
		html = template("survey_question_view", TEMPQUESTION);
		$("#question-view-" + TEMPQUESTION.id).replaceWith(html);
		$("#question-editor").remove();
	},

	qname: function() {
		name = $("#question-name").val();
		data = {};
		data.sid = SURVEY_ID;
		data.qid = TEMPQUESTION.id;
		data.name = name;
		$.post("/api/survey/question/update", data, function(res) {
			if (res.response.code == 0) {
				TEMPQUESTION.name = name;
			}
		})

	},

	qtag: function(e) {
		if (e.keyCode == 13) {
			tag = $("#question-tags").val();
			data = {};
			data.sid = SURVEY_ID;
			data.qid = TEMPQUESTION.id;
			data.tag = tag;
			$.post("/api/survey/question/update", data, function(res) {
				if (res.response.code == 0) {
					TEMPQUESTION.tag = tag;
				}
			})
		}
	},

	render: function(data) {
		html = ""
		questions = SURVEY_DATA.questions
		for (var i = questions.length - 1; i >= 0; i--) {
			html = template("survey_question_view", questions[i]) + html;
		};
		$("#survey_questions").html(html)
	},

	addQuestion: function(e) {
		var type = $(e.target).attr("data-id");
		console.log(type)
		switch (type) {
			case "radio":
				data = QUESTIONDATA[0]
				break;
			case "checkbox":
				data = QUESTIONDATA[1]
				break;
			case "text":
				data = QUESTIONDATA[2]
				break;
			case "textarea":
				data = QUESTIONDATA[3]
				break;
			default:
				data = QUESTIONDATA[0]
		}
		data.sid = SURVEY_ID;
		console.log(data)
		$.post("/api/survey/question/create", data, function(res) {
			html = template("survey_question_view", data);
			$("#survey_questions").append(html)
			$("#question-tags").tagsinput();
		});
	},

	clsQuestion: function(e) {
		//关闭题目
		html = template("survey_question_view", TEMPQUESTION);
		$("#question-view-" + TEMPQUESTION.id).replaceWith(html);
	},

	delQuestion: function(e) {
		qid = $(e.target).parents(".question").attr("data-id");
		data = {};
		data.sid = SURVEY_ID;
		data.qid = qid;
		$.post("/api/survey/question/delete", data, function(res) {
			if (res.response.code == 0) {
				$(e.target).parents(".question").remove();
			}
		});
	},

	editQuestion: function(e) {
		qid = $(e.target).parents(".question").attr("data-id");
		$("#question-view-" + qid).hide();
		$("#question-editor").remove();
		//在当前的数据中获取数据
		//从服务器获取题目信息
		data = {};
		data.sid = SURVEY_ID;
		data.qid = qid;
		$.get("/api/survey/question/read", data, function(res) {
			if (res.response.code == 0) {
				TEMPQUESTION = res.data;
				html = template("survey_question_edit", res.data);
				$("#question-view-" + qid).after(html);
				$(".editing").show().removeClass("editing");
				$("#question-view-" + qid).addClass("editing");
				$("#question-tags").tagsinput();
			}
		})
	},

	saveQuestion: function(e) {
		console.log("save question")
		qid = $(e.target).parents(".question").attr("data-id");
		data = TEMPQUESTION;
		$.post("/api/survey/question/update", data, function(res) {
			if (res.response.code == 0) {
				html = template("survey_question_view", res.data);
				$("#question-view-" + res.data.id).replaceWith(html);
			}
		})
	}
});

AppSurvey = new VSurveyForm();
AppSurvey.render(SURVEY_DATA);

$(document).ready(function() {
	$('#survey-starttime').datetimepicker({
		dateFormat: 'yy-mm-dd',
		timeFormat: 'HH:mm:ss'
	});
	$('#survey-endtime').datetimepicker({
		dateFormat: 'yy-mm-dd',
		timeFormat: 'HH:mm:ss'
	});

	$('#dialog-survey-info').dialog({
		autoOpen: false,
		width: 600,
		resizable: false,
		modal: true,
		title: "<div class='widget-header'><h4><i class='fa fa-warning'></i>添加调查</h4></div>",
		buttons: [{
			html: "<i class='fa fa-check'></i>&nbsp; 保存",
			"class": "btn btn-primary",
			click: function() {}
		}, {
			html: "<i class='fa fa-times'></i>&nbsp; Cancel",
			"class": "btn btn-default",
			click: function() {
				$(this).dialog("close");
			}
		}]
	});

	$('#dialog-picture-upload').dialog({
		autoOpen: false,
		width: 600,
		resizable: false,
		modal: true,
		title: "<div class='widget-header'><h4><i class='fa fa-warning'></i>添加调查</h4></div>",
		buttons: [{
			html: "<i class='fa fa-check'></i>&nbsp; 保存",
			"class": "btn btn-primary",
			click: function() {
				type = $("#form-pic-type").val();
				url = $("#form-pic-url").val();
				if (type == "question") {

				}
				if (type == "option") {
					TEMPOPTION.pic = url;
				}
				if (type == "question") {
					TEMPQUESTION.pic = url;
					data = {}
					data.sid = SURVEY_ID;
					data.qid = TEMPQUESTION.id;
					data.pic = url;
					$.post("/api/survey/question/update", data, function(res) {
						$("#dialog-picture-upload").dialog("close");
					})

				}
				if (type == "option") {
					TEMPOPTION.pic = url;
					data = {}
					data.sid = SURVEY_ID;
					data.qid = TEMPQUESTION.id;
					data.oid = TEMPOPTION.id;
					data.pic = url;
					$.post("/api/survey/option/update", data, function(res) {
						$("#dialog-picture-upload").dialog("close");
					})
				}
			}
		}, {
			html: "<i class='fa fa-times'></i>&nbsp; Cancel",
			"class": "btn btn-default",
			click: function() {
				$(this).dialog("close");
			}
		}]
	});

	$("#dialog-survey-description").dialog({
		autoOpen: false,
		width: 600,
		resizable: false,
		modal: true,
		title: "<div class='widget-header'><h4><i class='fa fa-warning'></i>添加调查</h4></div>",
		buttons: [{
			html: "<i class='fa fa-check'></i>&nbsp; 保存",
			"class": "btn btn-primary",
			click: function() {
				type = $("#form-description-type").val();
				content = $("#form-description-content").val();
				if (type == "question") {
					TEMPQUESTION.description = content;
					data = {}
					data.sid = SURVEY_ID;
					data.qid = TEMPQUESTION.id;
					data.description = content;
					$.post("/api/survey/question/update", data, function(res) {
						$("#dialog-survey-description").dialog("close");
					})

				}
				if (type == "option") {
					TEMPOPTION.description = content;
					data = {}
					data.sid = SURVEY_ID;
					data.qid = TEMPQUESTION.id;
					data.oid = TEMPOPTION.id;
					data.description = content;
					$.post("/api/survey/option/update", data, function(res) {
						$("#dialog-survey-description").dialog("close");
					})
				}
				if (type == "survey") {

				}
			}
		}, {
			html: "<i class='fa fa-times'></i>&nbsp; Cancel",
			"class": "btn btn-default",
			click: function() {
				$(this).dialog("close");
			}
		}]
	});

	$("#dialog-survey-logic").dialog({
		autoOpen: false,
		width: 600,
		resizable: false,
		modal: true,
		title: "<div class='widget-header'><h4><i class='fa fa-warning'></i>设置逻辑</h4></div>",
		buttons: [{
			html: "<i class='fa fa-check'></i>&nbsp; 保存",
			"class": "btn btn-primary",
			click: function() {

			}
		}, {
			html: "<i class='fa fa-times'></i>&nbsp; Cancel",
			"class": "btn btn-default",
			click: function() {
				$(this).dialog("close");
			}
		}]
	});


	var interval;
	new AjaxUpload($("#btn-pic-upload"), {
		action: "/api/common/picture",
		name: "file",
		responseType: "json",
		data: {
			type: "pic"
		},
		//autoSubmit: true,
		onSubmit: function(file, ext) {
			this.disable();
			interval = window.setInterval(function() {
				//上传动画
			}, 200);
		},
		onComplete: function(file, response) {
			console.log(response);
			console.log(file);
			window.clearInterval(interval);
			this.enable();
			res = response;
			if (res.response.code == 0) {
				console.log(res.data)
				$("#form-pic-url").val("/upload/" + res.data.filename);
				$("#form-pic-view").attr("src", "/upload/" + res.data.filename);
			}
		}
	});

	$("#form-pic-url").bind("blur", function() {
		$("#form-pic-view").attr("src", $("#form-pic-url").val());
	});
})